<script setup>
  import { reactive, onMounted } from 'vue'
  import PDFView from '@/components/PdfPreview.vue'
  import { ShortInvestment, LongInvestment } from '@/api/information/investment'
  const dialogData = reactive({
    isShow: false,
    title: '',
    pdfUrl: '',
  })
  // 短线策略
  const strategyData = reactive({
    page: 1,
    pageSize: 15,
    totalCount: 0,
    refreshLoading: false,
    data: []
  })
  // 投资策略
  const investData = reactive({
    page: 1,
    pageSize: 20,
    totalCount: 0,
    data: [],
  })
  
  const strategyPageChange = (page) => {
    strategyData.page = page
    getShortInvestment()
  }
  const investPageChange = (page) => {
    investData.page = page
    getLongInvestment()
  }

  const getShortInvestment = () => {
    strategyData.refreshLoading = true
    ShortInvestment(strategyData.page, strategyData.pageSize).then((res) => {
      strategyData.data = res.data.data
      strategyData.totalCount = res.data.total_count
      strategyData.refreshLoading = false
    })
  }

  const getLongInvestment = () => {
    LongInvestment(investData.page, investData.pageSize).then((res) => {
      investData.data = res.data.data
      investData.totalCount = res.data.total_count
    })
  }

  const refreshStrategy = () => {
    strategyData.page = 1
    strategyData.data = []
    getShortInvestment()
  }

  const toShowLongInvestment = (plan) => {
    dialogData.title = plan.title
    dialogData.pdfUrl = plan.pdf_url
    dialogData.isShow = true
  }

  onMounted(() => {
    getShortInvestment()
    getLongInvestment()
  })

</script>
<template>
  <div class="page-content">
    <div class="title-tip">本站所有策略仅作为参考，您需要根据实际情况作出自己的决策。若据此投资，产生的一切结果需要您自己承担。投资有风险，入市需谨慎！</div>
    <div class="title-label">
      <div class="label-item1">
        <div>超短线、短线策略</div>
        <el-icon v-if="strategyData.refreshLoading">
          <Loading />
        </el-icon>
        <el-icon v-else @click="refreshStrategy"><Refresh /></el-icon>
      </div>
      <div class="label-item2">中、长线策略</div>
    </div>
    <div class="strategy-content">
      <!-- 策略 -->
      <div class="left-pane">
        <el-scrollbar>
        <!-- 策略内容 -->
        <div class="strategy-box">
          <div v-for="item in strategyData.data" :key="item.id" class="strategy-item">
            <div class="time-box">
              <el-icon><Clock /></el-icon>
              <div>{{ item.strate_time }}</div>
            </div>
            <div class="content-box">{{ item.content }}</div>
            <div v-if="item.inactive" class="active-box">已失效</div>
          </div>
        </div>
        <div class="paginator">
          <el-pagination
            small
            background
            hide-on-single-page
            layout="prev, pager, next"
            :page-size="strategyData.pageSize"
            :total="strategyData.totalCount"
            @current-change="strategyPageChange"
          />
        </div>
        <div v-if="strategyData.data.length < 1">
          <el-empty description="暂无短线策略" />
        </div>
      </el-scrollbar>
      </div>
      <!-- 方案 -->
      <div class="right-pane">
        <el-scrollbar>
          <div>
            <div
              v-for="p in investData.data"
              :key="p.id"
              class="invest-item"
              @click="toShowLongInvestment(p)"
            >
              <div>
                <el-icon size="42"><svg-icon name="pdf-file"></svg-icon></el-icon>
              </div>
              <div>
                <div class="date-box">{{ p.active_date }} 至 {{ p.expire_date }}</div>
                <div class="title">
                  <div class="name">{{ p.title }}</div>
                  <div class="cre-time">{{ p.create_date }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="paginator">
            <el-pagination
              small
              background
              hide-on-single-page
              layout="prev, pager, next"
              :page-size="investData.pageSize"
              :total="investData.totalCount"
              @current-change="investPageChange"
            />
          </div>
          <div v-if="investData.data.length < 1">
            <el-empty description="暂无中长线策略" />
          </div>
        </el-scrollbar>
      </div>
    </div>
    <el-dialog
      v-model="dialogData.isShow"
      top="10vh"
      width="65%"
      :title="dialogData.title"
    >
      <div class="report-dialog-container">
        <PDFView :pdfUrl=dialogData.pdfUrl />
      </div>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
  .report-dialog-container{
    height: 70vh;
    overflow-y: auto;
  }
  .page-content {
    min-height: calc(100vh - #{$navbar-height});
    .title-tip {
      color: #e41714;
      font-size: 14px;
      font-weight: 600;
      line-height: 26px;
      height: 26px;
    }
    .title-label {
      display: flex;
      height: 24px;
      font-style: italic;
      line-height: 24px;
      .label-item1 {
        display: flex;
        align-items: center;
        color: #fff;
        background: linear-gradient(to right, #0078d4, #fff);
        // background-color: #0078d4;
        padding: 2px 8px;
        width: 904px;
        margin-right: 10px;
        .el-icon {
          margin-left: 4px;
          cursor: pointer;
          &:hover {
            color: #ed5a2d;
          }
        }
      }
      .label-item2 {
        color: #fff;
        background: linear-gradient(to right, #0078d4, #fff);
        // background-color: #0078d4;
        padding: 2px 8px;
        width: 500px;
        display: flex;
        align-items: center;
      }
    }
  }
  .strategy-content {
    display: flex;
    min-height: calc(100vh - #{$navbar-height} - 50px);
    .paginator {
      margin: 10px;
    }
    .left-pane {
      width: 890px;
      height: calc(100vh - #{$navbar-height} - 50px);
      margin-right: 10px;
      box-shadow: 0 0 10px #eee;
      background-color: #fff;
      .strategy-box {
        .strategy-item {
          padding: 10px;
          font-size: 14px;
          border-bottom: 1px solid #eee;
          line-height: 28px;
          &:hover {
            background-color: #f7f3f3;
          }
          .el-icon {
            color: #0078d4;
            margin-right: 4px;
          }
          .time-box {
            display: flex;
            align-items: center;
          }
          .active-box {
            font-style: italic;
            font-size: 12px;
            color: #aaa;
          }
        }
      }
    }
    .right-pane {
      width: 500px;
      height: calc(100vh - #{$navbar-height} - 50px);
      box-shadow: 0 0 10px #eee;
      background-color: #fff;
      .invest-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        &:hover {
          background-color: #f7f3f3;
          border: 1px solid #eee;
        }
        .el-icon {
          margin-right: 10px
        }
        .date-box {
          font-size: 12px;
        }
        .title {
          display: flex;
          align-items: center;
          width: 428px;
          .name {
            font-size: 15px;
            line-height: 24px;
            font-weight: 500;
            flex-grow: 1;
          }
          .cre-time {
            font-size: 12px;
            color: #666;
            margin-left: auto;
          }
        }
      }
    }
  }
</style>